<!--
 * @Author: your name
 * @Date: 2020-06-02 15:33:09
 * @LastEditTime: 2020-06-18 14:55:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \IM_Web\im_web\src\components\addressBook\addressBook.vue
--> 
<template>
    <div class="flex address">
        <div class style="width:360px;background: #f7f6f6;">
            <div class="flex align_center company">
                <div
                    v-for="item in companyList"
                    :key="item.id"
                    class="company_item"
                    :class="companyId===item.enterprise_id?'company_active':''"
                    @click="selectedComany(item)"
                >{{item.full_name}}</div>
            </div>
            <!-- <Scroll :on-reach-bottom="handleReachBottom" height="691"> -->
            <div class="buddy_list" >
                <Spin v-if="buddyLoading">
                    <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
                    <div>数据加载中...</div>
                </Spin>
                <div v-for="(item) in buddyList" :key="item.accid">
                    <BuddyList :item="item" @handle-accid="handleAccid" :accid="accid" />
                </div>
            </div>
            <!-- </Scroll> -->
        </div>
        <div class style="width:780px;">
            <div v-if="accid === ''" class="flex align_center justify_center logo_box">
                <div class="logo"></div>
            </div>
            <UserInfoRegion v-else :menberInfo="selectedItem" />
        </div>
    </div>
</template>

<script>
import BuddyList from "../buddyList/buddyList";
import UserInfoRegion from "../userInfoRegion/userInfoRegion";
export default {
    props: {},
    data() {
        return {
            companyId: "",
            buddyList: [],
            accid: "",
            companyList: [],
            selectedItem: {},
            buddyLoading: true
        };
    },
    computed: {},
    created() {
        this.getEnterprises();
        // this.getColleagues();
    },
    mounted() {},
    watch: {},
    methods: {
        selectedComany(params) {
            // console.log(params);
            this.companyId = params.enterprise_id;
            this.getComanyMembers(params.enterprise_id);
        },
        getComanyMembers(id) {
            // let info = JSON.parse(sessionStorage.getItem("info"));
            let params = {
                enterprise_id: id
                // type: 1
            };
            this.http.colleagues(params).then(res => {
                // console.log(res.data);
                if (res.data.errno === "000") {
                    this.buddyList = res.data.result.data;
                }
            });
        },
        handleReachBottom() {
            console.log("handleReachBottom");
        },
        handleAccid(params) {
            this.selectedItem = params;
            this.accid = params.accid;
            this.getOtherMemberInfo();
        },
        getOtherMemberInfo() {
            let params = { accid: this.accid };
            this.http.otherMemberInfo(params).then(res => {
                // console.log(res);
                if (res.data.errno === "000") {
                    this.selectedItem = {
                        ...this.selectedItem,
                        ...res.data.result.data
                    };
                } else {
                    this.accid = "";
                    this.selectedItem = {};
                }
            });
        },
        getEnterprises() {
            let params = {
                page: 1,
                page_size: 999
            };
            this.http.enterprises(params).then(res => {
                // console.log(res);
                this.buddyLoading = false;
                if (res.data.errno === "000") {
                    this.companyList = res.data.result.data;
                    this.companyId = res.data.result.data[0].enterprise_id;
                    this.getComanyMembers(
                        res.data.result.data[0].enterprise_id
                    );
                }
            });
        }
    },
    components: {
        BuddyList,
        UserInfoRegion
    }
};
</script>
<style>
.ivu-scroll-container {
    overflow-x: hidden;
}
.ivu-scroll-container::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
}

.ivu-scroll-container::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #409eff;
}

.ivu-scroll-container::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    /* // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
    /* // border-radius: 10px; */
    /* // background: #fff; */
    background: rgba(0, 0, 0, 0);
}
</style>
<style scoped lang="less">
.address {
    // background: #f7f6f6;
    position: relative;
    height: 716px;
    max-height: 716px;
    .company {
        cursor: pointer;
        overflow-x: auto;
        padding-bottom: 5px;
        .company_item {
            min-width: 80px;
            height: 20px;
            line-height: 20px;
            border-radius: 10px;
            white-space: nowrap;
            padding: 0 5px;
            box-sizing: border-box;
        }
    }
    .buddy_list {
        max-height: 690px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .buddy_list::-webkit-scrollbar,
    .company::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 5px;
    }

    .buddy_list::-webkit-scrollbar-thumb,
    .company::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #409eff;
    }

    .buddy_list::-webkit-scrollbar-track,
    .company::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        /* // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
        /* // border-radius: 10px; */
        /* // background: #fff; */
        background: rgba(0, 0, 0, 0);
    }
    .company_active {
        background: rgb(35, 150, 247);
        color: #fff;
    }
    .active {
        background: #dddddd;
    }
    .logo_box {
        background: #ededed;
        width: 780px;
        height: 800px;
        position: absolute;
        top: -84px;
        .logo {
            width: 150px;
            height: 150px;
            background: url("../../assets/images/index/logo@2x.png");
            background-size: 100%, 100%;
        }
    }
}
</style>
